import React, {useState, useEffect, useRef} from 'react'
import {Picker, List, Calendar, Button, InputItem, WhiteSpace} from 'antd-mobile'
import {history} from 'umi'
import {createForm} from 'rc-form'
import dayjs from 'dayjs'

function Search(props) {
  const [ createdAt, setCreatedAt ] = useState([])
  const [ minRent, setMinRent ] = useState(0)
  const [ maxRent, setMaxRent ] = useState(100000)

  const [ oneArea, setOneArea ] = useState([])
  const [ twoArea, setTwoArea ] = useState([])
  const [ threeArea, setThreeArea ] = useState([])
  const [ fourArea, setFourArea ] = useState([])

  const [ twoAreaList, setTwoAreaList ] = useState([])
  const [ threeAreaList, setThreeAreaList ] = useState([])
  const [ fourAreaList, setFourAreaList ] = useState([])

  const [ dateShow, setDateShow ] = useState(false)

  const areaIds = useRef([])

  const getAllAreaIds = (data) => {
    const temp = data
    if (!temp)
      return
    areaIds.current = areaIds.current.concat([ temp.value ])
    if (temp.children && temp.children.length) {
      for (let i = 0, len = temp.children.length; i < len; i++) {
        getAllAreaIds(temp.children[i])
      }
    }
  }

  const handleDate = () => {
    setDateShow(!dateShow)
  }

  const handleDateConfirm = (startTime, endTime) => {
    setCreatedAt([ dayjs(startTime).format('YYYY-MM-DD'), dayjs(endTime).format('YYYY-MM-DD') ])
    handleDate()
  }

  const handleClick = () => {
    areaIds.current = []
    if (fourArea.length) {
      areaIds.current = fourArea
    } else if (threeArea.length) {
      getAllAreaIds(threeAreaList.filter(item => item.id == threeArea[0])[0])
    } else if (twoArea.length) {
      getAllAreaIds(twoAreaList.filter(item => item.id == twoArea[0])[0])
    } else if (oneArea.length) {
      getAllAreaIds(props.area.filter(item => item.id == oneArea[0])[0])
    } else {
      areaIds.current = []
    }

    const data = {
      minRent,
      maxRent,
      createdAt,
      areaId: areaIds.current.join()
    }

    props.handleSearch(data)
  }

  const handleReset = () => {
    setOneArea([])
    setTwoArea([])
    setThreeArea([])
    setFourArea([])
    setTwoAreaList([])
    setThreeAreaList([])
    setFourAreaList([])
    setCreatedAt([])
    setMaxRent(100000)
    setMinRent(0)
    props.handleReset()
  }

  return (
    <div className='search'>

      {!props.areaLoading &&
      <Picker
        title={'省'}
        data={props.area}
        cols={1}
        value={oneArea}

        onChange={(val) => {
          if (!val)
            return
          setOneArea([ +val ])
          const temp = props?.area.filter(item => item.id == val)[0]
          setTwoArea([])
          setTwoAreaList(temp?.children || [])
          setThreeArea([])
          setThreeAreaList([])
          setFourArea([])
          setFourAreaList([])
        }}
      >
        <List.Item>所在省</List.Item>
      </Picker>
      }
      <Picker
        title={'市'}
        data={twoAreaList}
        cols={1}
        value={twoArea}
        onChange={(val) => {
          if (!val)
            return
          setTwoArea([ +val ])
          const temp = twoAreaList.filter(item => item.id == val)[0]
          setThreeArea([])
          setThreeAreaList(temp?.children || [])
          setFourArea([])
          setFourAreaList([])
        }}
      >
        <List.Item>市</List.Item>
      </Picker>
      <Picker
        title={'县'}
        data={threeAreaList}
        cols={1}
        value={threeArea}
        onChange={(val) => {
          if (!val)
            return
          setThreeArea([ +val ])
          const temp = threeAreaList.filter(item => item.id == val)[0]
          setFourArea([])
          setFourAreaList(temp?.children || [])
        }}
      >
        <List.Item>所在县</List.Item>
      </Picker>
      <Picker
        title={'地区'}
        data={fourAreaList}
        cols={1}
        value={fourArea}
        onChange={(val) => {
          if (!val)
            return
          setFourArea([ +val ])
        }}
      >
        <List.Item>所在地区</List.Item>
      </Picker>
      <div className='search-time' onClick={handleDate}>
        <p className='search-time_left'>创建时间</p>
        <p className='search-time_right'>{createdAt?.length ? (createdAt[0] + '~' + createdAt[1]) : '请选择时间'}</p>
      </div>
      <InputItem
        type={'money'}
        placeholder="最小租金"
        value={minRent}
        clear
        moneyKeyboardAlign="right"
        onChange={
          (val) => {
            setMinRent(val)
          }
        }
      >最小租金</InputItem>
      <InputItem
        type={'money'}
        placeholder="最大租金"
        value={maxRent}
        clear
        moneyKeyboardAlign="right"
        onChange={
          (val) => {
            setMaxRent(val)
          }
        }
      >最大租金</InputItem>
      <Button size='large' type='warning' onClick={handleClick}>搜索民宿</Button>
      <WhiteSpace size="lg"/>
      <Button size='large' type='primary' onClick={handleReset}>重 置</Button>
      <WhiteSpace size="lg"/>
      <Button size='large' type='danger' onClick={() => {
        history.push('/house/houseMap')
      }}>地图选房</Button>
      <WhiteSpace size="lg"/>
      <Button type='primary' size='large' onClick={() => {
        history.push('/house/houseRankList')
      }}>排行榜</Button>
      <WhiteSpace size="lg"/>
      <Button size='large' type='warning' onClick={() => {
        history.push('/house/like')
      }}>猜你喜欢</Button>
      <WhiteSpace size="lg"/>
      <Calendar
        visible={dateShow}
        onCancel={handleDate}
        onConfirm={handleDateConfirm}
      />
    </div>
  )
}

export default createForm()(Search)
